<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公告详情</title>
    <link rel="stylesheet" href="/static/assets/css/layui.css" media="all">
</head>
<style>
    body{
        background-color: #eeeeee;
        padding: 15px;
    }
</style>
<body>
<div class="layui-container" style="background-color: #eeeeee">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="layui-carousel" id="test1">
                <div carousel-item>
                    <div><img src="https://smartpark-1301017257.cos.ap-nanjing.myqcloud.com/9795cdca-ea6a-466c-9e6a-2d6f05167e9a"></div>
                    <div><img src="https://smartpark-1301017257.cos.ap-nanjing.myqcloud.com/9795cdca-ea6a-466c-9e6a-2d6f05167e9a"></div>
                    <div><img src="https://smartpark-1301017257.cos.ap-nanjing.myqcloud.com/9795cdca-ea6a-466c-9e6a-2d6f05167e9a"></div>
                    <div><img src="https://smartpark-1301017257.cos.ap-nanjing.myqcloud.com/9795cdca-ea6a-466c-9e6a-2d6f05167e9a"></div>
                    <div><img src="https://smartpark-1301017257.cos.ap-nanjing.myqcloud.com/9795cdca-ea6a-466c-9e6a-2d6f05167e9a"></div>
                </div>
            </div>
            <div class="layui-card"  style="margin-top: 15px">
                <div class="layui-card-header" style="font-size: 20px"><i class="layui-icon layui-icon-date" style="font-size: 24px"></i>公告</div>

                <ul class="flow-default" id="LAY_demo1"></ul>

            </div>
        </div>
        <div class="layui-col-md4">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>今日投诉建议</legend>
            </fieldset>
            <div class="layui-collapse" lay-filter="test" id="advise">
            </div>
            <div class="layui-card">
                <div class="layui-card-header">我要投诉！</div>
                <div class="layui-card-body">
                    卡片式面板面板通常用于非白色背景色的主体内<br>
                    从而映衬出边框投影
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="/static/assets/layui.js" charset="utf-8"></script>
<script src="/static/assets/jquery.min.js"></script>
<script>
    $(function () {
        layui.use(['carousel','flow','layer','element'], function(){
            var carousel = layui.carousel,
                flow = layui.flow,
                layer = layui.layer,
                element = layui.element;

            //建造实例
            carousel.render({
                elem: '#test1'
                ,width: '755px'
                ,height: '440px'
                ,interval: 2000
            });

            flow.load({
                elem: '#LAY_demo1' //流加载容器
                ,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
                ,done: function(page, next){ //执行下一页的回调
                    $.ajax({
                        url: '/announcement/showAllRelease',
                        type: 'post',
                        dataType: 'json',
                        success: function (res) {
                            var announcements = res.data.Announcements
                            //模拟数据插入
                            setTimeout(function(){
                                var lis = [];
                                for(var i = 0; i < announcements.length; i++){
                                    lis.push('<li style="border-bottom: 1px dotted #e2e2e2; ">'+
                                        '    <h2 style="">\n' +
                                        '        <span class="layui-bg-orange">标题</span>\n' +
                                        '        <a style="cursor: pointer" a-id="'+announcements[i].announcementsId+'">'+announcements[i].title+'</a>\n' +
                                        '    </h2>\n' +
                                        '    <div class="fly-list-info" style=" white-space: nowrap;\n' +
                                        '    overflow: hidden;\n' +
                                        '    text-overflow: ellipsis;">\n' +
                                        '          <cite>智能化停车场</cite>\n' +
                                        '     <i class="layui-icon layui-icon-tree"></i>'+
                                        '    <span style="margin-left: 500px">发布日期：'+announcements[i].releaseTime+'</span>\n' +
                                        '    </div>\n' +
                                        '    <div class="fly-list-badge"> </div>'+
                                        '    </li>')
                                }
                                //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                                //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                                next(lis.join(''), page < announcements.length/8); //假设总页数为 10
                                $('#LAY_demo1 li a').on('click', function () {
                                    console.log($(this).attr('a-id'))
                                    var index = layer.open({
                                        type: 2,
                                        title: '公告详情',
                                        shadeClose: true,
                                        shade: 0.8,
                                        area: ['650px', '500px'],
                                        content: '/desk/oneAnnouncement?announcementsId='+$(this).attr('a-id') //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                                    });
                                    layer.full(index);
                                })
                            }, 500);


                        }
                    })

                }
            });

            $.ajax({
                url: '/tAdvise/selectByPage',
                type: 'post',
                contentType: "application/json;charset=utf-8",//这个参数也是header参数
                dataType: 'json',
                data: JSON.stringify({
                    page: 1
                }),
                success: function (res) {
                    console.log(res.data)
                    var advises = res.data.advises
                    for (var i = 0; i < advises.length; i++) {
                        var str = '<div class="layui-colla-item">\n' +
                            '                    <h2 class="layui-colla-title">投诉建议：'+advises[i].advisecontent+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+advises[i].createtime+'</h2>\n' +
                            '                    <div class="layui-colla-content">\n' +
                            '                        <p>回复：'+advises[i].reply+'</p>\n' +
                            '                    </div>\n' +
                            '                </div>'
                        $('#advise').append(str)
                    }

                    layui.element.init();//初始化

                }
            })
        });
    })
</script>